<template>
	<div class="material-selector">
		<!-- 触发器：输入框 -->
		<el-input
			v-model="displayValue"
			:placeholder="placeholder"
			:disabled="disabled"
			:clearable="clearable"
			readonly
			class="material-selector-input"
			@click="handleOpenDialog"
			@clear="handleClear"
		>
			<template #suffix>
				<el-icon class="el-input__icon material-selector-icon" @click="handleOpenDialog">
					<Search />
				</el-icon>
			</template>
		</el-input>

		<!-- 弹窗 -->
		<el-dialog
			v-model="dialogVisible"
			:width="dialogWidth"
			:close-on-click-modal="false"
			:close-on-press-escape="true"
			:show-close="false"
			top="3vh"
			class="material-selector-dialog"
		>
			<!-- 自定义header -->
			<template #header>
				<div class="dialog-header-container">
					<!-- 左侧：标题 -->
					<div class="header-left">
						<span class="dialog-title">{{ dialogTitle }}</span>
						<el-divider direction="vertical" />
						<el-text v-if="selectedMaterial" type="info" size="small">
							{{ selectedMaterial.Name || selectedMaterial.MaterialName }} ({{ selectedMaterial.Code || selectedMaterial.Entity.Material.Code }})
						</el-text>
					</div>

					<!-- 右侧：操作按钮 -->
					<div class="header-right">
						<el-tag v-if="currentView === 'sku' && selectedAttributeCount > 0" type="primary" effect="plain" size="small">
							已选 {{ selectedAttributeCount }} 个属性
						</el-tag>
						<el-button v-if="currentView === 'sku' && selectedMaterial" type="warning" size="small" plain @click="openMaterialChangeRequest">
							物料变更申请
						</el-button>
						<el-button v-if="currentView === 'sku'" size="small" @click="backToMaterialList">
							<el-icon><ArrowLeft /></el-icon>
							返回
						</el-button>
						<el-button
							v-if="currentView === 'sku'"
							type="primary"
							size="small"
							:disabled="selectedAttributeCount === 0"
							:loading="skuLoading"
							@click="confirmAttributeSelection"
						>
							确定
						</el-button>
						<el-button v-if="currentView === 'material'" size="small" @click="handleCancel">关闭</el-button>
					</div>
				</div>
			</template>

			<!-- 内容区域 -->
			<div class="dialog-content">
				<!-- 物料列表视图 -->
				<MaterialList
					v-show="currentView === 'material'"
					ref="materialListRef"
					:api="materialApi"
					:filters="materialFilters"
					:search-state="materialSearchState"
					:allow-direct-select="props.allowDirectSelect"
					@select="handleViewSku"
					@search-change="handleSearchChange"
				/>

				<!-- SKU 属性选择视图（使用 Tabs 展示） -->
				<div v-show="currentView === 'sku'" v-if="selectedMaterial">
					<el-tabs v-model="activeTab">
						<!-- 属性选择标签页 -->
						<el-tab-pane label="属性选择" name="attributes">
							<AttributeSelector
								ref="attributeSelectorRef"
								:material="selectedMaterial"
								:is-purchase-scenario="props.isPurchaseScenario"
								:default-attribute-value-ids="defaultAttributeValueIds"
								@change="handleAttributeChange"
							/>
						</el-tab-pane>

						<el-tab-pane label="物料SKU列表" name="materialSkuList" v-if="selectedMaterial">
							<MaterialSkuList
								v-if="selectedMaterial?.ID"
								:compact-search-bar="true"
								:search-bar="false"
								:toolbar="false"
								:is-disabled="false"
								:selectable="props.showSkuListSelect"
								@select="handleSkuListSelect"
								:material-id="selectedMaterial.ID"
							/>
							<div v-else style="text-align: center; padding: 20px; color: #999">加载中...</div>
						</el-tab-pane>

						<!-- 物料申请标签页 -->
						<el-tab-pane label="物料申请" name="applications" v-if="props.showMaterialApplyTab && selectedMaterial">
							<MaterialChangeRequestDetailList :search-bar="false" :toolbar="false" :is-disabled="false" :material-id="selectedMaterial.ID" />
						</el-tab-pane>
						<!-- 物料库存标签页 -->
						<el-tab-pane label="物料库存" name="stock" v-if="selectedMaterial">
							<WtmTable v-if="materialStocks.length" :data="materialStocks" :header="materialStockColumns" :config="stockTableConfig" />
							<div v-else style="text-align: center; padding: 20px; color: #999">暂无库存数据</div>
						</el-tab-pane>

						<!-- 物料SKU申请标签页 -->
						<el-tab-pane label="物料SKU申请" name="history" v-if="props.showMaterialSkuApplyTab && selectedMaterial && hasAllAttributesSelected">
							<MaterialChangeRequestDetailList
								v-if="selectedSkuData?.Entity?.ID"
								:search-bar="false"
								:toolbar="false"
								:is-disabled="false"
								:material-sku-id="selectedSkuData.Entity.ID"
							/>
							<div v-else style="text-align: center; padding: 20px; color: #999">加载中...</div>
						</el-tab-pane>

						<el-tab-pane label="物料SKU" name="materialSku" v-if="selectedMaterial && hasAllAttributesSelected">
							<MaterialSkuList
								v-if="selectedSkuData?.Entity?.ID"
								:search-bar="false"
								:toolbar="false"
								:is-disabled="false"
								:material-sku-name="selectedSkuData.Entity.Name"
							/>
							<div v-else style="text-align: center; padding: 20px; color: #999">加载中...</div>
						</el-tab-pane>

						<!-- 物料SKU库存标签页 -->
						<el-tab-pane label="物料SKU库存" name="skuStock" v-if="selectedMaterial && hasAllAttributesSelected">
							<WtmTable v-if="selectedSkuData?.Entity && skuStocks.length" :data="skuStocks" :header="skuStockColumns" :config="stockTableConfig" />
							<div v-else style="text-align: center; padding: 40px; color: var(--el-text-color-placeholder); font-size: 13px">
								{{ selectedSkuData?.Entity ? '暂无库存数据' : '加载中...' }}
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
/**
 * 物料选择器主组件
 * @description 支持物料搜索、SKU属性选择、库存查询、物料申请等功能
 * @author Your Name
 * @version 1.0.0
 */
import { ref, computed, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, ArrowLeft } from '@element-plus/icons-vue';
import MaterialList from './MaterialList.vue';
import AttributeSelector from './AttributeSelector.vue';
import { SysMaterialApi } from '/@/views/supplychain/sysmaterial/api';
import { SysMaterialSkuApi } from '/@/views/supplychain/sysmaterialsku/api';
import type { ISysMaterial, ISysMaterialView, ISysMaterialQuery, ISysMaterialVm } from '/@/views/supplychain/sysmaterial/api/interface';
import type { ISysMaterialSkuView, ISysMaterialSkuQuery } from '/@/views/supplychain/sysmaterialsku/api/interface';
import other from '/@/utils/other';
/** 物料变更申请单创建组件 */
import MaterialChangeRequestCreate from '/@/views/supplychain/sysmaterialchangerequestbill/create.vue';
/** 物料申请单明细列表组件 */
import MaterialChangeRequestDetailList from '/@/views/supplychain/syspurchaserequestbillentry/index.vue';
/** 物料SKU列表组件 */
import MaterialSkuList from '/@/views/supplychain/sysmaterialsku/index.vue';
/** 项目表格组件 */
import WtmTable from '/@/components/table/index.vue';

// 定义组件名称
defineOptions({
	name: 'WtmMaterialSelector',
});

/**
 * ==================== Props 定义 ====================
 */
interface MaterialSelectorProps {
	/** v-model 绑定的值（SKU ID 或 Material ID） */
	modelValue?: string | string[] | null;
	/** 输入框占位符 */
	placeholder?: string;
	/** 是否禁用 */
	disabled?: boolean;
	/** 是否可清空 */
	clearable?: boolean;
	/** 是否多选（暂未实现） */
	multiple?: boolean;
	/** 弹窗宽度 */
	dialogWidth?: string;
	/** 显示字段格式（暂未使用） */
	labelFormat?: string;
	/** 只显示启用状态的物料 */
	onlyActive?: boolean;
	/** 额外的物料过滤条件 */
	materialFilters?: Partial<ISysMaterialQuery>;
	/** 额外的 SKU 过滤条件 */
	skuFilters?: Partial<ISysMaterialSkuQuery>;
	/** 是否为采购场景（true: 显示所有属性；false: 仅显示关键属性） */
	isPurchaseScenario?: boolean;
	/** 返回结果类型（'Sku': 返回SKU数据，'Material': 返回物料数据） */
	returnResultFields?: 'Material' | 'Sku';
	/** 是否允许直接选择物料（true: 点击物料直接选中；false: 强制进入SKU属性选择页面） */
	allowDirectSelect?: boolean;
	/** 用于回显的物料数据（避免重复请求） */
	materialData?: ISysMaterial | ISysMaterialView | null;
	/** 是否显示物料申请标签页 */
	showMaterialApplyTab?: boolean;
	/** 是否显示物料SKU申请记录标签页 */
	showMaterialSkuApplyTab?: boolean;
	/** 是否显示SKU列表的选取操作 */
	showSkuListSelect?: boolean;
}

const props = withDefaults(defineProps<MaterialSelectorProps>(), {
	modelValue: null,
	placeholder: '请选择物料',
	disabled: false,
	clearable: true,
	multiple: false,
	dialogWidth: '85%',
	labelFormat: '{MaterialName}-{SkuName}({SkuCode})',
	onlyActive: true,
	materialFilters: () => ({}),
	skuFilters: () => ({}),
	isPurchaseScenario: false,
	returnResultFields: 'Sku',
	allowDirectSelect: false,
	materialData: null,
	showMaterialApplyTab: false,
	showMaterialSkuApplyTab: false,
	showSkuListSelect: false,
});

/**
 * ==================== Emits 定义 ====================
 */
const emit = defineEmits<{
	/** v-model 更新事件 */
	'update:modelValue': [value: string | string[] | null];
	/** 选择变化事件（返回 ID 和完整数据） */
	change: [value: string | string[] | null, skus: ISysMaterialSkuView | ISysMaterialSkuView[] | null];
	/** 物料选择事件 */
	materialSelect: [material: ISysMaterialView];
	/** SKU 选择事件 */
	skuSelect: [sku: ISysMaterialSkuView | ISysMaterialSkuView[]];
}>();

/**
 * ==================== API 实例 ====================
 */
const materialApi = SysMaterialApi(); // 物料 API
const skuApi = SysMaterialSkuApi(); // SKU API

/**
 * ==================== 响应式状态 ====================
 */
// 弹窗状态
const dialogVisible = ref(false);
// 当前视图（物料列表 / SKU属性选择）
const currentView = ref<'material' | 'sku'>('material');
// 当前激活的标签页
const activeTab = ref('attributes');

// 选中的数据
const selectedMaterial = ref<ISysMaterialView | null>(null); // 选中的物料
const selectedAttributes = ref<Record<string, string>>({}); // 选中的属性值 { 属性名: 属性值 }
const selectedAttributeIds = ref<Record<string, string>>({}); // 选中的属性值ID { 属性名: 属性值ID }
const selectedSkuData = ref<any>(null); // 完整的SKU数据（用于回显和展示）

// 加载状态
const skuLoading = ref(false); // SKU 获取/创建的加载状态

/**
 * ==================== 计算属性 ====================
 */
/**
 * 已选属性数量
 */
const selectedAttributeCount = computed(() => {
	return Object.keys(selectedAttributes.value).length;
});

/**
 * 默认属性值 ID 数组（用于属性回显）
 * @description 从选中的 SKU 数据中提取属性值 ID 数组，传递给属性选择器进行回显
 */
const defaultAttributeValueIds = computed(() => {
	if (!selectedSkuData.value) {
		return [];
	}

	// 优先使用 AttributevalueIds 字段
	if (selectedSkuData.value.AttributevalueIds && Array.isArray(selectedSkuData.value.AttributevalueIds)) {
		return selectedSkuData.value.AttributevalueIds.filter((id: string) => id && id.trim() !== '');
	}

	return [];
});

/**
 * 物料搜索状态（用于保存搜索条件）
 */
const materialSearchState = ref<{
	Name: string;
	Code: string;
	State: string;
	currentPage: number;
	pageSize: number;
}>({
	Name: '',
	Code: '',
	State: '',
	currentPage: 1,
	pageSize: 50,
});

/**
 * ==================== 库存表格配置 ====================
 */
/** 物料库存表格列配置 */
const materialStockColumns = [
	{ key: 'WarehouseName', title: '仓库', minWidth: 120 },
	{ key: 'LocationName', title: '库位', minWidth: 150 },
	{ key: 'SkuCode', title: 'SKU编码', minWidth: 120 },
	{ key: 'SkuName', title: 'SKU名称', minWidth: 120 },
	{ key: 'Quantity', title: '数量', minWidth: 100, align: 'right' },
	{ key: 'UnitName', title: '单位', minWidth: 80, align: 'center' },
	{ key: 'StoreType', title: '库存类型', minWidth: 100 },
];

/** SKU库存表格列配置 */
const skuStockColumns = [
	{ key: 'WarehouseName', title: '仓库', minWidth: 120 },
	{ key: 'LocationName', title: '库位', minWidth: 150 },
	{ key: 'SkuCode', title: 'SKU编码', minWidth: 120 },
	{ key: 'SkuName', title: 'SKU名称', minWidth: 120 },
	{ key: 'Quantity', title: '数量', minWidth: 100, align: 'right' },
	{ key: 'UnitName', title: '单位', minWidth: 80, align: 'center' },
	{ key: 'StoreType', title: '库存类型', minWidth: 100 },
];

/** 库存表格配置 */
const stockTableConfig = {
	isBorder: true,
	isStripe: true,
	isSerialNo: false,
	isSelection: false,
	isOperate: false,
	hidePagination: false,
	hideSetting: true,
	hidePrint: true,
	hideRefresh: true,
	hideDensity: true,
	loading: false,
};

/**
 * ==================== 子组件引用 ====================
 */
const materialListRef = ref<InstanceType<typeof MaterialList>>();
const attributeSelectorRef = ref<InstanceType<typeof AttributeSelector>>();

/**
 * 弹窗标题
 */
const dialogTitle = computed(() => '选择物料');

/**
 * 判断关键属性是否已全部选择
 * @description 用于决定是否显示 SKU 相关标签页（物料SKU申请、物料SKU库存等）
 */
const hasAllAttributesSelected = computed(() => {
	// 获取属性选择器中的属性列表
	const attrList = attributeSelectorRef.value?.attributeList || [];

	// 过滤出关键属性
	const keyAttributes = attrList.filter((attr: any) => attr.IsKeyAttribute);

	// 如果没有关键属性，返回 false
	if (keyAttributes.length === 0) {
		return false;
	}

	// 检查所有关键属性是否都已选择
	const allKeyAttributesSelected = keyAttributes.every((attr: any) => {
		const attrName = attr.Name;
		return selectedAttributeIds.value[attrName] && selectedAttributeIds.value[attrName] !== '';
	});

	return allKeyAttributesSelected;
});

/**
 * 物料库存数据
 * @description 显示该物料所有 SKU 的库存汇总
 */
const materialStocks = computed(() => {
	const material = selectedMaterial.value as any;
	return material?.Stocks || [];
});

/**
 * SKU 库存数据
 * @description 根据选中的 SKU ID 筛选库存，显示该 SKU 的精确库存
 */
const skuStocks = computed(() => {
	// 必须先选择完所有属性
	if (!hasAllAttributesSelected.value) return [];

	// 必须已经通过 getOrCreate 获取到了 SKU 数据
	if (!selectedSkuData.value?.Entity?.ID) return [];

	const material = selectedMaterial.value as any;
	const allStocks = material?.Stocks || [];

	// 根据 SKU ID 筛选库存
	const skuId = selectedSkuData.value.Entity.ID;
	return allStocks.filter((stock: any) => stock.SkuId === skuId);
});

/**
 * ==================== 数据格式化辅助函数 ====================
 */

/**
 * 统一 SKU 数据格式
 * @description 将后端返回的各种SKU数据格式统一转换为标准格式：
 *              { Material, Attributes: [{ Name, Value }], AttributevalueIds: [] }
 * @param skuData - 后端返回的原始SKU数据（格式可能不同）
 * @param selectedAttributeValueIds - 用户选择的属性值ID数组（可选，用于从物料属性中提取）
 * @returns 标准格式的SKU数据
 *
 * @example
 * // 输入: { Entity: { Attributes: [...] }, Material: {...} }
 * // 输出: { Entity: {...}, Material: {...}, Attributes: [{ Name: '颜色', Value: '红色' }], AttributevalueIds: ['id1'] }
 */
const normalizeSkuData = (skuData: any, selectedAttributeValueIds?: string[]): any => {
	// 快速检查：如果已经是标准格式，直接返回
	if (isStandardFormat(skuData)) {
		return skuData;
	}

	// 复制原始数据，避免修改原对象
	const normalizedData = { ...skuData };

	// 提取物料属性列表（用于属性名称查找）
	const materialAttrs = getMaterialAttributes(skuData);

	// 尝试从多个可能的数据源提取属性
	const attributes = extractAttributes(skuData, materialAttrs, selectedAttributeValueIds);

	// 如果提取成功，设置标准格式
	if (attributes.length > 0) {
		normalizedData.Attributes = attributes;
		// 保留属性值ID数组（用于回显）
		if (!normalizedData.AttributevalueIds) {
			normalizedData.AttributevalueIds = attributes.map((attr: any) => attr.ID).filter(Boolean);
		}
	} else {
		// 兜底：使用当前选择的属性
		normalizedData.Attributes = useCurrentSelection();
	}

	// 确保有物料信息
	normalizedData.Material = ensureMaterialInfo(skuData);

	return normalizedData;
};

/**
 * 检查是否为标准格式
 * @description 标准格式：Attributes 数组包含 { Name, Value } 结构
 */
const isStandardFormat = (data: any): boolean => {
	return data.Attributes && Array.isArray(data.Attributes) && data.Attributes.length > 0 && data.Attributes[0].Name && data.Attributes[0].Value;
};

/**
 * 获取物料属性列表
 * @description 从多个可能的位置提取物料属性定义
 */
const getMaterialAttributes = (skuData: any): any[] => {
	return skuData.Material?.Attributes || skuData.Entity?.Material?.Attributes || (selectedMaterial.value as any)?.Attributes || [];
};

/**
 * 提取属性数组
 * @description 从不同的数据结构中提取属性，转换为标准格式
 */
const extractAttributes = (skuData: any, materialAttrs: any[], selectedIds?: string[]): any[] => {
	// 策略1: 从 Entity.Attributes 提取（getOrCreate 接口返回格式）
	const entityAttributes = skuData.Entity?.Attributes || skuData.Attributes;
	if (entityAttributes && Array.isArray(entityAttributes) && entityAttributes.length > 0 && entityAttributes[0].Value) {
		return extractFromEntityAttributes(entityAttributes, materialAttrs);
	}

	// 策略2: 从属性值ID数组提取
	const attributeValueIds =
		selectedIds || skuData.SelectedAttributeIds || skuData.SelectedAttributesIds || skuData.AttributevalueIds || skuData.AttributeValueIds;

	if (attributeValueIds && Array.isArray(attributeValueIds) && attributeValueIds.length > 0) {
		return extractAttributesFromValueIds(materialAttrs, attributeValueIds);
	}

	// 策略3: 从 Attributes 数组的 ValueId 字段提取
	if (skuData.Attributes && Array.isArray(skuData.Attributes) && skuData.Attributes.length > 0) {
		if (skuData.Attributes[0].ValueId) {
			const valueIds = skuData.Attributes.map((a: any) => a.ValueId);
			return extractAttributesFromValueIds(materialAttrs, valueIds);
		}
	}

	return [];
};

/**
 * 从 Entity.Attributes 提取属性
 * @description 格式: [{ ID, SkuId, Value: { ID, AttributeId, Value, Attribute?: {...} } }]
 */
const extractFromEntityAttributes = (entityAttributes: any[], materialAttrs: any[]): any[] => {
	return entityAttributes.map((item: any) => {
		const valueObj = item.Value || item;
		let attributeName = valueObj.Attribute?.Name || '';
		const attributeValue = valueObj.Value || '';
		const attributeId = valueObj.AttributeId;

		// 如果属性名为空，从物料属性列表中查找
		if (!attributeName && attributeId && materialAttrs) {
			const matchedAttr = materialAttrs.find((attr: any) => attr.ID === attributeId || attr.MaterialId === attributeId);
			if (matchedAttr) {
				attributeName = matchedAttr.Name;
			}
		}

		return {
			Name: attributeName,
			Value: attributeValue,
			ID: valueObj.ID, // 保留ID用于回显
		};
	});
};

/**
 * 使用当前选择的属性（兜底方案）
 */
const useCurrentSelection = (): any[] => {
	if (Object.keys(selectedAttributes.value).length > 0) {
		return Object.entries(selectedAttributes.value).map(([name, value]) => ({
			Name: name,
			Value: value,
		}));
	}
	return [];
};

/**
 * 确保有物料信息
 * @description 从多个可能的位置提取物料信息
 */
const ensureMaterialInfo = (skuData: any): any => {
	return skuData.Material || skuData.Entity?.Material || selectedMaterial.value || null;
};

/**
 * 从属性值 ID 数组提取属性信息
 * @description 根据属性值 ID 在物料属性列表中查找对应的属性名和属性值
 * @param materialAttrs - 物料属性列表（包含属性定义和属性值）
 * @param valueIds - 属性值 ID 数组
 * @returns 标准格式的属性数组 [{ Name, Value, ID }]
 *
 * @example
 * materialAttrs = [
 *   { ID: 'attr1', Name: '颜色', Values: [{ ID: 'val1', Value: '红色' }] }
 * ]
 * valueIds = ['val1']
 * // 输出: [{ Name: '颜色', Value: '红色', ID: 'val1' }]
 */
const extractAttributesFromValueIds = (materialAttrs: any[] | undefined, valueIds: string[]): any[] => {
	if (!materialAttrs || !Array.isArray(materialAttrs) || valueIds.length === 0) {
		return [];
	}

	const attributes: any[] = [];

	// 遍历物料属性定义
	materialAttrs.forEach((attrDef: any) => {
		if (!attrDef.Values || !Array.isArray(attrDef.Values)) {
			return;
		}

		// 在属性值列表中查找匹配的值
		attrDef.Values.forEach((valueDef: any) => {
			// 兼容多种 ID 字段命名
			const valueId = valueDef.ID || valueDef.AttributeId || valueDef.id;

			if (valueId && valueIds.includes(valueId)) {
				attributes.push({
					Name: attrDef.Name,
					Value: valueDef.Value,
					ID: valueId, // 保留 ID 用于回显
				});
			}
		});
	});

	return attributes;
};

/**
 * ==================== 显示相关计算属性 ====================
 */

/**
 * 输入框显示值
 * @description 根据选中的数据生成显示文本，格式：物料名称 - 属性1: 值1 / 属性2: 值2
 */
const displayValue = computed(() => {
	// 优先使用 selectedSkuData（已确认选择的完整数据）
	if (selectedSkuData.value) {
		// 需求：输入框展示 SKU 名称
		const skuName = selectedSkuData.value.Entity?.Name || selectedSkuData.value.SkuName || selectedSkuData.value.Name || '';
		if (skuName) return skuName;

		const materialName = getMaterialName(selectedSkuData.value);
		const attributesText = getAttributesText(selectedSkuData.value.Attributes);

		if (materialName) {
			return attributesText ? `${materialName} - ${attributesText}` : materialName;
		}

		// 调试：找不到物料名称
		console.warn('[MaterialSelector] 无法获取物料名称', {
			selectedSkuData: selectedSkuData.value,
			selectedMaterial: selectedMaterial.value,
		});
	}

	// 兜底：使用 selectedMaterial（弹窗选择过程中）
	if (selectedMaterial.value) {
		const materialName = selectedMaterial.value.Name || (selectedMaterial.value as any).MaterialName || '';
		const attributesText = getAttributesText(Object.entries(selectedAttributes.value).map(([name, value]) => ({ Name: name, Value: value })));

		return attributesText ? `${materialName} - ${attributesText}` : materialName;
	}

	return '';
});

/**
 * 从多个可能的位置获取物料名称
 */
const getMaterialName = (data: any): string => {
	return (
		data.Material?.Name ||
		data.Entity?.Material?.Name ||
		data.MaterialName ||
		selectedMaterial.value?.Name ||
		(selectedMaterial.value as any)?.MaterialName ||
		''
	);
};

/**
 * 格式化属性数组为文本
 * @param attributes - 属性数组 [{ Name, Value }]
 * @returns 格式化文本，例如：颜色: 红色 / 尺寸: XL
 */
const getAttributesText = (attributes: any[]): string => {
	if (!attributes || !Array.isArray(attributes) || attributes.length === 0) {
		return '';
	}
	return attributes
		.filter((attr) => attr.Name && attr.Value)
		.map((attr) => `${attr.Name}: ${attr.Value}`)
		.join(' / ');
};

/**
 * 物料过滤条件
 * @description 合并自定义过滤条件和启用状态过滤
 */
const materialFilters = computed(() => {
	const filters: Record<string, any> = { ...props.materialFilters };
	if (props.onlyActive) {
		filters.State = '启用';
	}
	return filters;
});

/**
 * ==================== 事件处理函数 ====================
 */
const handleSkuListSelect = (row: any): void => {
	// 行数据标准化，保证后续显示/回显一致
	selectedSkuData.value = normalizeSkuData(row);
	// 按既有逻辑向外传递值（v-model 为 SkuId）
	const skuId = row.ID || row.Entity?.ID;
	if (skuId) {
		emit('update:modelValue', skuId);
		emit('change', skuId, selectedSkuData.value as any);
		emit('skuSelect', selectedSkuData.value as any);
	}
	// 关闭弹窗
	dialogVisible.value = false;
};

/**
 * 打开选择器弹窗
 */
const handleOpenDialog = (): void => {
	if (props.disabled) return;

	dialogVisible.value = true;

	// 决定初始显示的视图
	if (props.allowDirectSelect) {
		// 允许直接选择物料，始终显示物料列表
		currentView.value = 'material';
	} else if (selectedMaterial.value) {
		// 已有选中的物料，直接显示属性选择页面
		currentView.value = 'sku';
		activeTab.value = 'attributes';
		// AttributeSelector 组件会根据 defaultAttributeValueIds 自动回显
	} else {
		// 无选中物料，显示物料列表
		currentView.value = 'material';
	}
};

/**
 * 处理物料选择
 * @description 选择物料后，加载完整的物料数据（包括属性和库存），然后根据模式决定后续操作
 */
const handleViewSku = async (material: ISysMaterialView): Promise<void> => {
	// 检查是否选择了同一个物料（避免重复加载）
	const isSameMaterial = selectedMaterial.value?.ID === material.ID;

	// 切换物料时，清空旧的选择状态
	if (!isSameMaterial) {
		selectedAttributes.value = {};
		selectedAttributeIds.value = {};
		selectedSkuData.value = null;
	}

	// 重置状态，触发子组件重新加载
	selectedMaterial.value = null;
	await nextTick();

	try {
		// 获取完整物料数据（包括属性和库存）
		const fullMaterial = await loadFullMaterialData(material);
		selectedMaterial.value = fullMaterial;
		emit('materialSelect', fullMaterial);

		// 根据模式决定后续操作
		if (props.allowDirectSelect) {
			// 直接选择模式：选中物料后立即返回
			handleDirectMaterialSelect(fullMaterial);
		} else {
			// 属性选择模式：进入 SKU 属性选择页面
			currentView.value = 'sku';
			activeTab.value = 'attributes';
		}
	} catch (error) {
		console.error('[MaterialSelector] 获取物料详情失败:', error);
		// 降级处理：使用列表中的物料数据
		selectedMaterial.value = material;
		emit('materialSelect', material);
	}
};

/**
 * 加载完整的物料数据
 * @description 调用 Get 接口获取包含属性和库存的完整物料数据
 */
const loadFullMaterialData = async (material: ISysMaterialView): Promise<ISysMaterialView> => {
	const response: any = await materialApi.get(material.ID!);
	const vmData = response.data || response;

	if (vmData && vmData.Entity) {
		return {
			...vmData.Entity,
			Stocks: vmData.Stocks || [],
		};
	}

	return material;
};

/**
 * 处理直接选择物料（不选择 SKU）
 */
const handleDirectMaterialSelect = (material: ISysMaterialView): void => {
	const materialData = {
		Material: material,
		Attributes: [], // 直接选择物料，无属性
	};

	selectedSkuData.value = normalizeSkuData(materialData);

	emit('change', material.ID || null, selectedSkuData.value as any);
	emit('update:modelValue', material.ID || null);
	dialogVisible.value = false;
};

/**
 * 处理搜索状态变化
 * @description 保存搜索条件，用于回显
 */
const handleSearchChange = (searchData: { Name: string; Code: string; State: string; currentPage: number; pageSize: number }): void => {
	materialSearchState.value = { ...searchData };
};

/**
 * 处理属性选择变化
 * @param attributeIds - 属性值 ID 映射
 * @param attributeValues - 属性值映射
 * @param isRestoring - 是否为回显操作（true: 不清空SKU数据；false: 清空）
 */
const handleAttributeChange = (attributeIds: Record<string, string>, attributeValues: Record<string, string>, isRestoring: boolean = false): void => {
	selectedAttributeIds.value = attributeIds;
	selectedAttributes.value = attributeValues;

	// 用户主动选择时清空 SKU 数据，回显时保留
	if (!isRestoring) {
		selectedSkuData.value = null;
	}
};

/**
 * 获取 SKU 数据（用于 SKU 相关标签页）
 * @description 当用户切换到物料SKU、物料SKU申请、物料SKU库存标签页时，
 *              根据选中的属性调用 getOrCreate 接口获取或创建 SKU
 */
const fetchSkuDataForTabs = async (): Promise<void> => {
	if (!selectedMaterial.value) {
		return;
	}

	// 从属性选择器获取已选的属性值 ID 数组
	const attributeValueIds = attributeSelectorRef.value?.attributeValueIds || [];
	const hasAllAttributes = attributeValueIds.length > 0 && attributeValueIds.every((id: string) => id);

	if (!hasAllAttributes) {
		selectedSkuData.value = null;
		return;
	}

	try {
		skuLoading.value = true;

		// 调用 getOrCreate 接口（如果 SKU 不存在会自动创建）
		const response = await skuApi.getOrCreate({
			MaterialId: selectedMaterial.value.ID,
			AttributeValueIds: attributeValueIds,
		});

		if (response) {
			// 统一数据格式
			selectedSkuData.value = normalizeSkuData(response);
		}
	} catch (error) {
		console.error('[MaterialSelector] 获取SKU数据失败:', error);
		selectedSkuData.value = null;
	} finally {
		skuLoading.value = false;
	}
};

/**
 * ==================== 监听器 ====================
 */

/**
 * 监听标签页切换
 * @description 切换到 SKU 相关标签页时，自动加载 SKU 数据
 */
watch(activeTab, (newTab) => {
	const skuRelatedTabs = ['materialSku', 'history', 'skuStock'];
	if (skuRelatedTabs.includes(newTab)) {
		fetchSkuDataForTabs();
	}
});

/**
 * 确认属性选择
 * @description 用户确认选择属性后，根据模式（SKU/Material）返回相应数据
 */
const confirmAttributeSelection = async (): Promise<void> => {
	// 验证属性选择器是否初始化
	if (!attributeSelectorRef.value) {
		ElMessage.error('属性选择器未初始化');
		return;
	}

	// 从子组件获取选择的属性
	const childAttributeIds = attributeSelectorRef.value.selectedAttributeIds || {};
	const childAttributes = attributeSelectorRef.value.selectedAttributes || {};

	// 验证是否至少选择了一个属性
	if (Object.keys(childAttributes).length === 0) {
		ElMessage.warning('请至少选择一个属性');
		return;
	}

	if (!selectedMaterial.value) return;

	try {
		// 同步到父组件（用于回显）
		selectedAttributeIds.value = { ...childAttributeIds };
		selectedAttributes.value = { ...childAttributes };

		// 根据返回结果类型处理
		if (props.returnResultFields === 'Sku') {
			await handleSkuModeConfirm();
		} else {
			handleMaterialModeConfirm();
		}

		dialogVisible.value = false;
	} catch (error: any) {
		console.error('[MaterialSelector] 确认选择失败:', error);
		skuLoading.value = false;
	}
};

/**
 * SKU 模式：获取或创建 SKU
 */
const handleSkuModeConfirm = async (): Promise<void> => {
	// 获取属性值 ID 数组
	const attributeValueIds = attributeSelectorRef.value?.attributeValueIds || [];

	if (!attributeValueIds || attributeValueIds.length === 0) {
		ElMessage.error('属性值 ID 为空，无法创建 SKU');
		return;
	}

	skuLoading.value = true;

	try {
		// 调用 getOrCreate 接口
		const response = await skuApi.getOrCreate({
			MaterialId: (selectedMaterial.value as any)?.Entity?.MaterialId || selectedMaterial.value?.ID,
			AttributeValueIds: attributeValueIds,
		});

		if (response) {
			const skuId = response.Entity?.ID || null;

			// 统一数据格式，先使用后端返回的数据
			selectedSkuData.value = normalizeSkuData(response, attributeValueIds);

			// 补充用户选择的所有属性（包括非关键属性），确保显示完整
			if (selectedAttributes.value && Object.keys(selectedAttributes.value).length > 0) {
				selectedSkuData.value.Attributes = Object.entries(selectedAttributes.value).map(([name, value]) => ({
					Name: name,
					Value: value,
				}));
			}

			// 触发事件
			emit('update:modelValue', skuId);
			emit('change', skuId, selectedSkuData.value as any);
			emit('skuSelect', selectedSkuData.value as any);
		}
	} finally {
		skuLoading.value = false;
	}
};

/**
 * Material 模式：返回物料和属性数据
 */
const handleMaterialModeConfirm = (): void => {
	const materialData = {
		Material: selectedMaterial.value,
		Attributes: Object.entries(selectedAttributes.value).map(([name, value]) => ({
			Name: name,
			Value: value,
		})),
		AttributevalueIds: Object.values(selectedAttributeIds.value),
	};

	// 统一数据格式
	selectedSkuData.value = normalizeSkuData(materialData);

	// 构建返回结果
	const result = {
		material: selectedMaterial.value,
		attributeIds: { ...selectedAttributeIds.value },
		attributes: { ...selectedAttributes.value },
		attributesText: attributeSelectorRef.value?.selectedAttributesText || '',
	};

	// 触发事件
	emit('change', selectedMaterial.value!.ID || null, result as any);
	emit('update:modelValue', selectedMaterial.value!.ID || null);
};

/**
 * 返回物料列表
 * @description 从 SKU 属性选择页面返回物料列表页面
 */
const backToMaterialList = (): void => {
	currentView.value = 'material';
	// 注意：保持 selectedMaterial 和搜索条件，方便用户重新选择
};

/**
 * 关闭弹窗
 * @description 取消选择，关闭弹窗并清空临时状态
 */
const handleCancel = (): void => {
	dialogVisible.value = false;

	// 延迟清空状态，等待对话框关闭动画完成
	nextTick(() => {
		currentView.value = 'material';
		activeTab.value = 'attributes';
		selectedMaterial.value = null;
		selectedAttributes.value = {};
		selectedAttributeIds.value = {};
		selectedSkuData.value = null;
	});
};

/**
 * 清空选择
 * @description 清空已选择的数据（输入框的清空按钮）
 */
const handleClear = (): void => {
	emit('update:modelValue', null);
	emit('change', null, null);
	selectedMaterial.value = null;
	selectedAttributes.value = {};
	selectedAttributeIds.value = {};
	selectedSkuData.value = null;
};

/**
 * 打开物料变更申请弹窗
 * @description 基于当前选中的物料创建变更申请单
 */
const openMaterialChangeRequest = (): void => {
	if (!selectedMaterial.value?.ID) {
		ElMessage.warning('请先选择物料');
		return;
	}

	// 打开物料变更申请单的新增窗口
	other.openDialog(
		'新增物料变更申请',
		MaterialChangeRequestCreate,
		{ MaterialId: selectedMaterial.value.ID },
		null, // refreshFunc
		'70%' // width
	);
};

/**
 * ==================== 数据回显相关函数 ====================
 */

/**
 * 根据物料 ID 加载物料数据
 * @description 用于 Material 模式的数据回显
 */
const loadMaterialById = async (materialId: string): Promise<void> => {
	if (!materialId) {
		selectedMaterial.value = null;
		return;
	}

	try {
		// 调用 Get 接口获取完整物料数据
		const response: any = await materialApi.get(materialId);
		const vmData = response.data || response;

		if (vmData?.Entity) {
			selectedMaterial.value = {
				...vmData.Entity,
				Stocks: vmData.Stocks || [],
			};
		} else {
			selectedMaterial.value = null;
		}
	} catch (error) {
		console.error('[MaterialSelector] 加载物料数据失败:', error);
		selectedMaterial.value = null;
	}
};

/**
 * 根据 SKU ID 加载 SKU 数据
 * @description 用于 SKU 模式的数据回显，同时加载关联的物料数据
 */
const loadSkuById = async (skuId: string): Promise<void> => {
	if (!skuId) {
		selectedSkuData.value = null;
		selectedMaterial.value = null;
		return;
	}

	try {
		// 获取 SKU 数据
		const response = await skuApi.get(skuId);

		if (response) {
			// 统一数据格式
			selectedSkuData.value = normalizeSkuData(response);

			// 加载关联的物料数据
			await loadMaterialForSku(selectedSkuData.value);
		} else {
			selectedSkuData.value = null;
			selectedMaterial.value = null;
		}
	} catch (error) {
		console.error('[MaterialSelector] 加载SKU数据失败:', error);
		selectedSkuData.value = null;
		selectedMaterial.value = null;
	}
};

/**
 * 为 SKU 加载关联的物料数据
 * @description 从 SKU 的 Material 字段提取物料 ID，加载完整物料数据
 */
const loadMaterialForSku = async (skuData: any): Promise<void> => {
	if (!skuData?.Material) {
		selectedMaterial.value = null;
		return;
	}

	const materialId = skuData.Material.ID;

	if (!materialId) {
		selectedMaterial.value = skuData.Material as any;
		return;
	}

	try {
		// 加载完整物料数据（包括库存）
		const materialResponse: any = await materialApi.get(materialId);
		const vmData = materialResponse.data || materialResponse;

		if (vmData?.Entity) {
			selectedMaterial.value = {
				...vmData.Entity,
				Stocks: vmData.Stocks || [],
			};
		} else {
			selectedMaterial.value = skuData.Material as any;
		}
	} catch (error) {
		console.error('[MaterialSelector] 加载物料数据失败:', error);
		selectedMaterial.value = skuData.Material as any;
	}
};

/**
 * 监听 materialData prop 变化
 * @description 优先使用外部传入的物料数据（避免重复请求）
 */
watch(
	() => props.materialData,
	(newMaterialData) => {
		if (newMaterialData) {
			selectedMaterial.value = newMaterialData as ISysMaterialView;
			// 清空旧的 SKU 数据，避免显示错误数据
			selectedSkuData.value = null;
		} else {
			selectedMaterial.value = null;
			selectedSkuData.value = null;
		}
	},
	{ immediate: true }
);

/**
 * 监听 modelValue 变化（用于数据回显）
 * @description 根据传入的 ID 自动加载物料或 SKU 数据
 */
watch(
	() => props.modelValue,
	async (newValue, oldValue) => {
		// 如果已经有 materialData，不需要重新加载
		if (props.materialData) {
			return;
		}

		// 值未变化，跳过
		if (newValue === oldValue) {
			return;
		}

		// 检查当前数据是否已经匹配（避免重复加载）
		if (newValue && typeof newValue === 'string') {
			const isAlreadyLoaded =
				(props.returnResultFields === 'Material' && selectedMaterial.value?.ID === newValue) ||
				(props.returnResultFields === 'Sku' && selectedSkuData.value?.Entity?.ID === newValue);

			if (isAlreadyLoaded) {
				return;
			}

			// 根据模式加载数据
			if (props.returnResultFields === 'Sku') {
				await loadSkuById(newValue);
			} else {
				await loadMaterialById(newValue);
			}
		} else if (!newValue) {
			// 清空数据
			selectedMaterial.value = null;
			selectedSkuData.value = null;
		}
	},
	{ immediate: true }
);
</script>

<style scoped lang="scss">
.material-selector {
	width: 100%;

	.material-selector-input {
		cursor: pointer;

		:deep(.el-input__wrapper) {
			transition: all 0.2s;
			box-shadow: 0 0 0 1px var(--el-border-color) inset;

			&:hover {
				box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
			}

			&.is-focus {
				box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
			}
		}

		:deep(.el-input__inner) {
			cursor: pointer;
			font-size: 13px;

			&::placeholder {
				color: var(--el-text-color-placeholder);
				font-size: 13px;
			}
		}
	}

	.material-selector-icon {
		cursor: pointer;
		color: var(--el-text-color-regular);
		font-size: 14px;
		transition: all 0.2s;

		&:hover {
			color: var(--el-color-primary);
			transform: scale(1.1);
		}
	}
}

.material-selector-dialog {
	:deep(.el-dialog) {
		border-radius: 10px;
		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		animation: dialogFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		max-width: 85vw;
		margin: 0 auto;
	}

	:deep(.el-dialog__header) {
		padding: 8px 12px;
		border-bottom: 1px solid var(--el-border-color-light);
		background: linear-gradient(to bottom, var(--el-fill-color-blank), var(--el-fill-color-light));
		position: relative;
		z-index: 1;
	}

	:deep(.el-dialog__body) {
		padding: 0;
		max-height: calc(90vh - 50px);
		overflow: hidden;
		background-color: var(--el-bg-color-page);
	}

	:deep(.el-dialog__headerbtn) {
		width: 26px;
		height: 26px;
		top: 8px;
		right: 12px;

		.el-dialog__close {
			font-size: 16px;
			color: var(--el-text-color-secondary);
			transition: all 0.2s;

			&:hover {
				color: var(--el-color-primary);
				transform: rotate(90deg);
			}
		}
	}

	.dialog-content {
		height: 100%;
		overflow: hidden;
		animation: contentSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	// 自定义 header 样式
	.dialog-header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;

		.header-left {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;

			.dialog-title {
				font-size: 14px;
				font-weight: 600;
				color: var(--el-text-color-primary);
				white-space: nowrap;
			}

			:deep(.el-divider--vertical) {
				margin: 0;
				height: 14px;
				border-color: var(--el-border-color);
			}

			:deep(.el-text) {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 6px;
			flex-shrink: 0;

			:deep(.el-tag) {
				font-weight: 500;
				font-size: 11px;
				padding: 0 8px;
				height: 22px;
				border-radius: 3px;
			}

			:deep(.el-button) {
				min-width: 60px;
				height: 28px;
				padding: 0 12px;
				border-radius: 4px;
				font-size: 12px;
				font-weight: 500;
				transition: all 0.2s;

				&.el-button--primary {
					background: var(--el-color-primary);
					border: none;

					&.is-disabled {
						background: var(--el-button-disabled-bg-color);
					}
				}

				&:not(.el-button--primary) {
					background: var(--el-fill-color-blank);
					border: 1px solid var(--el-border-color);

					&:hover {
						border-color: var(--el-color-primary);
						color: var(--el-color-primary);
						background: var(--el-color-primary-light-9);
					}
				}

				.el-icon {
					font-size: 12px;
				}
			}
		}
	}

	// Tabs 样式
	.selector-tabs {
		height: 100%;
		display: flex;
		flex-direction: column;

		:deep(.el-tabs__header) {
			margin: 0;
			padding: 4px 12px;
			background: var(--el-fill-color-blank);
			border-bottom: 1px solid var(--el-border-color-light);
			flex-shrink: 0;
		}

		:deep(.el-tabs__nav-wrap) {
			padding: 0;

			&::after {
				height: 1px;
				background-color: transparent;
			}
		}

		:deep(.el-tabs__item) {
			padding: 0 12px;
			height: 28px;
			line-height: 28px;
			font-size: 12px;
			color: var(--el-text-color-regular);
			transition: all 0.2s;

			&:hover {
				color: var(--el-color-primary);
			}

			&.is-active {
				color: var(--el-color-primary);
				font-weight: 500;
			}

			&.is-disabled {
				color: var(--el-text-color-disabled);
				cursor: not-allowed;
			}
		}

		:deep(.el-tabs__active-bar) {
			height: 2px;
			background-color: var(--el-color-primary);
		}

		:deep(.el-tabs__content) {
			flex: 1;
			padding: 0;
			overflow: hidden;
		}

		:deep(.el-tab-pane) {
			height: 100%;
			overflow-y: auto;
		}
	}

	// 遮罩层优化
	:deep(.el-overlay) {
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
}

// 动画定义
@keyframes dialogFadeIn {
	0% {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes contentSlideIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
